<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 文本格式化 练习</title>
</head>
<body>
    <a href="#q1">跳转到引用</a>
    <br></br>
    <a href="#pre1">跳转到pre标签</a>
    <br></br>
    <h1>html 文本格式化</h1>
    <h3>粗体显示</h3>
    <b>我是加粗显示</b>
    <strong>我也是加粗显示</strong>
    <br>
    <hr>
    <h3>斜体显示</h3>
    <i>我是斜体显示</i>
    <em>我也是斜体显示</em>
    <br>
    <hr></hr>
    <h3>删除&插入效果</h3>
    <p>我要<del>躺平</del><ins>奋斗</ins></p>
    <br>
    <hr></hr>
    <h3>下划线</h3>
    <u>我是下划线</u>
    <br>
    <h3>下标</h3>
    <p>H<sub>2</sub>O</p>
    <h3>上标</h3>
    <p>2<sup>2</sup>=4</p>
    <h3><a id="q1">引用</a></h3>
    <blockquote>
        <p>在每个死胡同的尽头，都有另一个维度的天空。</p>
        <footer>——廖一梅</footer>
    </blockquote>
    <cite>——《三体》</cite>
    <p><q>我这个人走得很慢，但是我从不后退。——林肯</q></p>
    <hr></hr>
    <h1><a id="pre1">pre标签</a></h1>
    <pre>
           _oo0oo_
          o8888888o
          88" . "88
          (| -_- |)
          0\  =  /0
        ___/`---'\___
      .' \\|     |// '.
     / \\|||  :  |||// \
    / _||||| -:- |||||- \
   |   | \\\ -  /// |   |
   <hr>
   <h1>输出控制</h1>
    </pre>
    <code>print("hello world!")</code>
    <pre>
    <code>
        #include <iostream>
        using namespace std;

        int main()
        {
            cout << "Hello World!";
            return 0;
        }
    </code>
    </pre>
    <p><b>注释：</b>我是一个变量<var>variable</var></p>
    <h1>地址</h1>
    <address>
        html学习资源来自——<a href="https://www.runoob.com/html/html-basic.html">菜鸟教程</a>
        <br>
        Written by Kexin Cheng
    </address>
    <h1>缩写和首字母缩写</h1>
    <abbr title="World Health Organization">WHO</abbr>
    <abbr title="National Aeronautics and Space Administration">NASA</abbr>
    <abbr title="United States">USA</abbr>
    <abbr title="Artificial Intelligence">AI</abbr>
    <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
    <h1>文本方向</h1>
    <bdo dir="ltr">你是年少的欢喜</bdo>
    <b><bdo dir="rtl">你是年少的欢喜</bdo></b>
    <h1>创建图片链接</h1>
    <a href="https://www.runoob.com/try/try.php?filename=tryhtml_imglink" target="_blank" rel="noopener">
        <img border=10 src="images\OIP-C.jpg" alt="图片加载失败" width="200" height="150">
    </a>
    <br>
    <a href="https://objtube.github.io/front-end-roadmap/#/">前端学习路线</a>
</body>
</html>